/**
 * 新建，修改用户需要用到的表单
 * 布局方式：
 * 		首先有两个fieldset，每个fieldset中，采用column布局，分成两列；每列中采用form布局
 */
Ext.define('app.view.user.form.UserForm', {

	extend: 'Ext.form.Panel',
	
	alias: 'widget.userform',
	
	buttonAlign: 'center',
	trackResetOnLoad: true, //将保留最近一次加载数据或者重置表单后的状态，配合form.getForm().isDirty()来判断表单中的数据是否发生了变化 
	
	defaults: {
		bodyStyle: 'padding: 2px;'
	},
    items: {
    	xtype: 'tabpanel',
    	frame: true,
    	items: [{
			title: '基本信息',
			defaults: {
				layout: 'fit',
				bodyStyle: 'padding: 2px;'
			},
			//items数组中包含5个对象，表示5行数据
	    	items: [{
	    		layout: 'column',
				defaultType: 'textfield',
				defaults: {
					labelAlign: 'right',
					labelWidth: 70,
					allowBlank: false
				},
				//items数组中包含2个对象，表示有2列数据
	    		items: [{
	    			name: 'id',
	    			allowBlank: true,
	    			hidden: true
	    		}, {
	    			columnWidth: .5,
	    			fieldLabel: '登录名',
	    			name: 'username',
	    			beforeLabelTextTpl: [ //在必填字段的标签前面加上一个红色的*号标示 
				        '<span style="color:red;font-weight:bold" data-qtip="必填选项">*&nbsp;&nbsp;</span>'  
				    ]
	    		}, {
	    			columnWidth: .5,
	    			fieldLabel: '用户名',
	    			name: 'nickname'
	    		}]
	    	}, {
	    		layout: 'column',
				defaultType: 'textfield',
				defaults: {
					labelAlign: 'right',
					labelWidth: 70,
					allowBlank: false
				},
	    		items: [{
	    			columnWidth: .5,
	    			fieldLabel: '真实姓名',
	    			emptyText: '请输入身份证上的真实姓名',
	    			name: 'realname'
	    		}, {
	    			columnWidth: .5,
	    			fieldLabel: '身份证号',
	    			emptyText: '请输入18位身份证号码',
	    			regex: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
	    			regexText: '身份证号格式验证不通过',
	    			name: 'idcard',
	    			beforeLabelTextTpl: [ //在必填字段的标签前面加上一个红色的*号标示 
				        '<span style="color:red;font-weight:bold" data-qtip="必填选项">&nbsp;&nbsp;*</span>'  
				    ]
	    		}]
	    	}, {
	    		layout: 'column',
				defaults: {
					labelAlign: 'right',
					labelWidth: 70
				},
	    		items: [{
	    			columnWidth: .5,
	    			xtype: 'fieldcontainer',
	    			fieldLabel: '性别',
	    			defaultType: 'radiofield',
		            defaults: {
		                flex: 1
		            },
		            layout: 'hbox',
		            items: [{
		            	boxLabel: '男',
		            	name: 'gender',
		            	inputValue: 'M'
		            }, {
		            	boxLabel: '女',
		            	name: 'gender',
		            	inputValue: 'F'
		            }]
	    		}, {
	    			columnWidth: .5,
	    			xtype: 'datefield',
	    			fieldLabel: '出生日期',
	    			emptyText: '请输入身份证上的出生日期',
	    			name: 'birthday',
	    			format: 'Y-m-d',
	    			maxValue: new Date()
	    		}]
	    	}, {
	    		layout: 'column',
				defaultType: 'textfield',
				defaults: {
					labelAlign: 'right',
					labelWidth: 70
				},
	    		items: [{
	    			columnWidth: .5,
	    			fieldLabel: '手机号码',
	    			name: 'phoneNumber',
	    			emptyText: '请输入11位手机号码',
	    			regex: /1[3|4|5|8][0-9]\d{4,8}$/,
	    			regexText: '手机号码格式不正确'
	    		}, {
	    			columnWidth: .5,
	    			fieldLabel: '电子邮箱',
	    			name: 'email',
	    			vtype: 'email',
	    			emptyText: '请输入电子邮箱，如a@b.com'
	    		}]
	    	}, {
	    		layout: 'column',
				defaultType: 'textfield',
				defaults: {
					labelAlign: 'right',
					labelWidth: 70
				},
	    		items: {
	    			columnWidth: 1, //表示100%
	    			xtype: 'textarea',
		    		labelAlign: 'right',
					labelWidth: 70,
					fieldLabel: '现居住地址',
					name: 'address'
	    		}
	    	}]
    	}, {
			title: '其他信息',
			defaults: {
				layout: 'fit',
				bodyStyle: 'padding: 2px;'
			},
			//items数组中包含3个对象，表示3行数据。第一行中分成2列，第一列分成4行，第二列为头像展示区
	    	items: [{
	    		layout: 'column',
	    		items: [{
	    			columnWidth: 1,
	    			defaults: {
						bodyStyle: 'padding: 2px;'
					},
	    			items: [{
	    				layout: 'column',
	    				defaultType: 'textfield',
						defaults: {
							labelAlign: 'right',
							labelWidth: 70
						},
	    				items: {
			    			columnWidth: 1,
			    			fieldLabel: '毕业院校',
			    			name: 'university',
			    			emptyText: '请填写您毕业的院校名称'
			    		}
	    			}, {
	    				layout: 'column',
	    				defaultType: 'combobox',
						defaults: {
							labelAlign: 'right',
							labelWidth: 70
						},
			    		items: [{
			    			columnWidth: .5,
		    				fieldLabel: '户籍所在地',
			    			name: 'province',
			    			displayField: 'name',
			    			valueField: 'name',
			    			emptyText: '选择省',
			    			bind: {
								store: '{provinceStore}'			    			
			    			},
			    			listeners: {
			    				change: 'onProvinceChange'
			    			}
			    		}, {
			    			columnWidth: .2,
			    			name: 'city',
			    			displayField: 'name',
			    			valueField: 'name',
			    			emptyText: '选择市',
			    			bind: {
								store: '{cityStore}'			    			
			    			},
			    			listeners: {
			    				change: 'onCityChange'
			    			}
			    		}, {
			    			columnWidth: .3,
			    			name: 'area',
			    			displayField: 'name',
			    			valueField: 'name',
			    			emptyText: '选择区县',
			    			bind: {
			    				store: '{areaStore}'
			    			}
			    		}]
	    			}, {
	    				layout: 'column',
	    				defaultType: 'textfield',
						defaults: {
							labelAlign: 'right',
							labelWidth: 70,
							labelSeparator:""
						},
	    				items: {
	    					columnWidth: 1,
	    					name: '',
	    					fieldLabel: ' ',
			    			emptyText: '请输入具体地址'
	    				}
	    			}, {
	    				layout: 'column',
	    				defaultType: 'filefield',
						defaults: {
							labelAlign: 'right',
							labelWidth: 70,
							buttonText: '请选择文件'
						},
	    				items: {
			    			columnWidth: 1,
			    			fieldLabel: '上传头像',
			    			name: 'portrait'
			    		}
	    			}]	
				}, {
					width: 130,
					height: 130,
					layout: 'fit',
					defaults: {
						bodyStyle: 'padding:2px;'						
					},
					items: {
						name: 'portrait',
						xtype: 'panel',
						border: true
					}
				}]
	    	}, {
	    		layout: 'column',
				defaults: {
					labelAlign: 'right',
					labelWidth: 70
				},
	    		items: {
	    			columnWidth: 1, //表示100%
	    			xtype: 'textarea',
		    		labelAlign: 'right',
					fieldLabel: '个人简介',
					labelWidth: 70,
					name: 'introduce'
	    		}
	    		
	    	}]
    	}]
    },
    
    buttons: [{
		text: '保存',
		glyph: 0xf00c,
		tooltip: '点此按钮后数据会保存且窗口将关闭',
		listeners: {
			click: 'saveOrUpdateUser'
		}
	}, {
		text: '下一个',
		glyph: 0xf061,
		tooltip: '点此按钮后数据会保存但窗口不会关闭',
		handler: function() {
			alert(1);
		}
	}, {
		text: '取消', //取消之前需要判断数据是否被编辑过，如果被编辑过，需要给出提示
		glyph: 0xf00d,
		tooltip: '点此按钮后数据不会保存且窗口将关闭',
		handler: function() {
			var form = this.up('window').down('form').getForm();
			if (!form.isDirty()) {
				form.reset();
				this.up('window').close();
				
			} else {
				Ext.Msg.confirm('提示', '表单数据已经被修改，您确定直接关闭吗？', function(choice) {
					if (choice == "yes") { //如果确定，清空表单数据同时关闭窗口
						form.reset();
						this.up('window').close();
					}
				}, this);
			}
		}
	}]
}); 